<template>
  <div>
    <h2>可出库存列表</h2>
    <br />

    <div style="display: flex; align-items: center">
      产品编号:<el-input v-model="productCode" style="width: 200px"></el-input>
      产品名称:<el-input v-model="productName" style="width: 200px"></el-input>
      <el-button type="primary" @click="GetAvailableStockList()"
        >查询</el-button
      >
      <el-button type="success" @click="exportListToExcel(multipleSelection)"
        >导出</el-button
      >
    </div>
    <br />
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border="1"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="序号"> </el-table-column>
      <el-table-column prop="productCode" label="产品编号"> </el-table-column>
      <el-table-column prop="productName" label="产品名称"> </el-table-column>
      <el-table-column prop="specs" label="产品规格"> </el-table-column>
      <el-table-column prop="productTypeId" label="类别">
        <template slot-scope="data">
          <span v-if="data.row.productTypeId == 1">移动电源</span>
          <span v-if="data.row.productTypeId == 2">调压阀</span>
        </template>
      </el-table-column>
      <el-table-column prop="unitName" label="存储单位"> </el-table-column>
      <el-table-column prop="inventory" label="库存"> </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import XLSX from "xlsx";
import { GetAvailableStockList } from "@/api/StatementMange/AvailableStock";
export default {
  data() {
    return {
      tableData: [],
      productCode: "",
      productName: "",
      pageIndex: 1,
      pageSize: 5,
      totalCount: 0,
      pageCount: 0,
      multipleSelection: [],
    };
  },
  created() {
    this.GetAvailableStockList();
  },
  //计算属性
  computed: {
    sid() {
      var sid = [];
      this.multipleSelection.forEach((item) => {
        sid.push(item.id);
      });
      return sid;
    },
  },
  methods: {
    GetAvailableStockList() {
      var data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        productCode: this.productCode,
        productName: this.productName,
      };
      GetAvailableStockList(data).then((res) => {
        this.tableData = res.data.data;
        this.totalCount = res.data.totalCount;
        this.pageCount = res.data.pageCount;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.GetAvailableStockList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.GetAvailableStockList();
    },
    //获取列表序号
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //导出
    exportListToExcel(multipleSelection) {
      // 过滤需要导出的字段
      const filteredData = multipleSelection.map((item) => {
        return {
          序号: item.id,
          产品编号: item.productCode,
          产品名称: item.productName,
          产品规格: item.specs,
          类别: item.productTypeId == 1 ? "移动电源" : "调压阀",
          存储单位: item.unitName,
          库存: item.inventory,
        };
      });
      const worksheet = XLSX.utils.json_to_sheet(filteredData);
      //设置表格宽度
      worksheet["!cols"] = [
        { width: 10 },
        { width: 15 },
        { width: 15 },
        { width: 20 },
        { width: 15 },
      ];

      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      // 导出Excel文件
      XLSX.writeFile(workbook, "设备类型.xlsx");
    },
  },
};
</script>

<style>
</style>